import React from 'react';
import { Card, Descriptions, Tag, Divider, Timeline, Button, Space, Breadcrumb } from 'antd';
import { HomeOutlined, ClockCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { Link, useParams, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './FeedbackDetail.module.less';

const FeedbackDetail: React.FC = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  // 模拟数据
  const feedback = {
    id,
    projectName: '示范区档案管理项目',
    projectCode: 'PRJ001',
    title: '档案目录不完整',
    type: '材料问题',
    status: 'pending',
    priority: 'high',
    createTime: '2024-03-16 10:30',
    deadline: '2024-03-20',
    description: '部分重要档案缺少目录索引，需要补充完善。',
    assignee: '张三',
    history: [
      {
        time: '2024-03-16 10:30',
        status: 'created',
        operator: '系统',
        content: '问题已创建'
      },
      {
        time: '2024-03-16 14:20',
        status: 'assigned',
        operator: '李四',
        content: '已分配处理人员'
      }
    ]
  };

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: <Link to="/pre-acceptance/feedback">问题反馈</Link>,
          },
          {
            title: '问题详情',
          }
        ]} />
      </div>

      <Card className={styles.detailCard}>
        <div className={styles.header}>
          <div className={styles.title}>
            <h2>{feedback.title}</h2>
            <Space>
              <Tag color="blue">{feedback.type}</Tag>
              <Tag color={feedback.status === 'pending' ? 'orange' : 'success'}>
                {feedback.status === 'pending' ? '待处理' : '已处理'}
              </Tag>
              <Tag color={feedback.priority === 'high' ? 'red' : 'green'}>
                {feedback.priority === 'high' ? '高优先级' : '普通优先级'}
              </Tag>
            </Space>
          </div>
        </div>

        <Divider />

        <Descriptions column={2} className={styles.info}>
          <Descriptions.Item label="所属项目">{feedback.projectName}</Descriptions.Item>
          <Descriptions.Item label="项目编号">{feedback.projectCode}</Descriptions.Item>
          <Descriptions.Item label="创建时间">{feedback.createTime}</Descriptions.Item>
          <Descriptions.Item label="截止时间">{feedback.deadline}</Descriptions.Item>
          <Descriptions.Item label="处理人">{feedback.assignee}</Descriptions.Item>
        </Descriptions>

        <Divider orientation="left">问题描述</Divider>
        <div className={styles.description}>
          {feedback.description}
        </div>

        <Divider orientation="left">处理记录</Divider>
        <Timeline
          className={styles.timeline}
          items={feedback.history.map(item => ({
            color: item.status === 'created' ? 'blue' : 'green',
            dot: item.status === 'created' ? <ClockCircleOutlined /> : <CheckCircleOutlined />,
            children: (
              <div className={styles.timelineItem}>
                <div className={styles.timelineTime}>{item.time}</div>
                <div className={styles.timelineContent}>
                  <div>{item.content}</div>
                  <div className={styles.timelineOperator}>操作人：{item.operator}</div>
                </div>
              </div>
            ),
          }))}
        />

        <Divider />

        <div className={styles.footer}>
          <Space>
            <Button onClick={() => navigate(-1)}>返回</Button>
            {feedback.status === 'pending' && (
              <Button 
                type="primary"
                onClick={() => navigate(`/pre-acceptance/feedback/reform/${id}`)}
              >
                提交整改反馈
              </Button>
            )}
          </Space>
        </div>
      </Card>
    </MainLayout>
  );
};

export default FeedbackDetail; 